<template>
  <div class="index1">
      <!-- 背景图片 -->
    <div class="background"></div>

    <!-- 内容 -->

    <!-- <div class="tit1">
       <h1>忆<br>百<br>年<br>峥<br>嵘</h1>
    </div>

    <div class="tit2">
        <h1>展<br>时<br>代<br>篇<br>章</h1>
    </div> -->

    <div class="logo animated fadeInUp">
       <img src="../assets/100.png">
    </div>
   
     <el-button type="danger" round class="btn animated pulse" @click="btn">开启百年征程</el-button>

  </div>
</template>

<script>
export default {
    methods: {
        btn() {
            // 跳转
            this.$router.push({path:"/index2"})
        }
    },
}
</script>

<style scoped>
.sd{
  width: 5rem;
  height: 5rem;
}
.index1 {
  width: 100%;
  height: 100%;
}
.background {
  width: 100%;
  height: 100%;
  background-image: url('../assets/background1.png');
  background-size: 100% 100%;
  z-index: -999;
}
.background image{
    width: 100%;
    height: 100%;
}

.logo{
    width: 15rem;
    height: 10rem;
    position: absolute;
    top: 10%;
    left: 40%;
    
}
.logo img{
    width: 100%;
    height: 100%;
}

.btn{
    width: 10rem;
    height: 4rem;
    position: absolute;
    top: 55%;
    left: 43%;
    background-color: crimson;
    animation-iteration-count: infinite;
    animation-duration: 2000ms;
}

.tit1{
    position: absolute;
    top: 3%;
    left: 1%;
}
.tit2{
    position: absolute;
    top: 3%;
    left: 80%;
}

</style>